<template>
  <div class="login">
    <!-- 导航 -->
    <van-nav-bar title="登录页"></van-nav-bar>
    <!-- 2.输入区域 -->
    <!--
      @failed="onFailed" //  表单校验失败
      @submit="hLogin"   //  表单校验成功
      validate-first     是否在某一项校验不通过时停止校验
     -->
    <van-form validate-first @failed="onFailed" @submit="hLogin">
         <van-cell-group>
              <van-field
                v-model.trim="userInfo.mobile"
                required
                :rules="[{ pattern:/^1[3-9]\d{9}$/, message: '请输入正确的手机号'}]"
                label="手机号"
              />
              <van-field
                v-model="userInfo.code"
                required
                :rules="[{ pattern: /^\d{6}$/, message: '请输入6位验证码'}]"
                label="密码"
                placeholder="请输入正确的密码"
              />
           </van-cell-group>
    </van-form>
    <!-- 3.按钮 -->
    <div class="btn-wrap">
      <!--
        native-type="submit"  如果点击登录先去校验
       -->
      <van-button round type="info" native-type="submit" class="btn" @click="hLogin">登陆按钮</van-button>
    </div>
     <van-button round type="info" class="btn" @click="hTest">获取个人信息</van-button>
         当前是否登陆？{{ $store.state.tokenInfo.token ? '已登录' : '未登录' }}
  </div>
</template>

<script>
// import ajax from '@/utils/request.js'
import { login, getProfile } from '@/api/user.js'
export default {
  name: 'Login',
  data () {
    return {
      userInfo: {
        mobile: '13912345678',
        code: '246810'
      }
    }
  },
  methods: {
    // 1.表单验证
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    },
    hTest () {
      getProfile()
    },
    // check () {
    // 如果验证不通过，返回false
    // 规则：不能为空
    //   this.mobile_errmsg = this.userInfo.mobile === '' ? '请输入正确的手机号' : ''
    //   this.code_errmsg = this.userInfo.code === '' ? '验证码错误' : ''
    //   if (this.userInfo.mobile === '') {
    //     return false
    //   }
    //   if (this.userInfo.code === '') {
    //     return false
    //   }
    //   return true
    // },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    async hLogin () {
      // if (!this.check()) {
      //   return
      // }
      const { mobile, code } = this.userInfo
      // 校验手机号
      console.log(this.userInfo)
      // 这个是在 “结构”
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        mask: true, // 整体添加一个遮罩
        message: '加载中...'
      })
      // 2.发请求
      try {
        const res = await login(mobile, code)
        console.log(res)
        // 登录成功后，保存token 到vuex (所有的组件都可以访问这个数据)
        this.$store.commit('mSetTokenInfo', res.data.data)
        const profile = await getProfile()
        // 这个时存入vuex公共类中
        this.$store.commit('mSetUserInfo', profile.data.data)
        console.log('这是个人资料', profile)
        // 用户跳转
        // 根据当前路由参数，决定跳到哪里去
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
        this.$toast.success('登陆成功')
      } catch (error) {
        console.log(error)
        this.$toast.fail('登陆失败')
      }
      // 3.根据请求结果给出反馈，做后续
    }
  }
}
</script>
<style lang="less" scoped>
  .login{
    .btn-wrap{
      padding:20px;
      .btn {
        width: 100%;
        background-color: #6db4fd;
        color: #fff;
      }
    }
  }
</style>
